<%@ page import="cn.zkw.vo.Article" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    String path = request.getContextPath();      //上下文路径，/mldn
    //请求方式                    服务器名，地址                          端口
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>
<html lang="zh-CN">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>清歌一片文章页面</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/style.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="<%=request.getContextPath()%>/images/icon/icon.png">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/icon/favicon.ico">
    <script src="<%=request.getContextPath()%>/js/jquery-2.1.4.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/nprogress.js"></script>
    <script src="<%=request.getContextPath()%>/js/jquery.qqFace.js"></script>
    <script src="<%=request.getContextPath()%>/js/jquery.lazyload.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/html5shiv.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/respond.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/selectivizr-min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/scripts.js"></script>
    <script src="<%=request.getContextPath()%>/back/lib/ueditor/ueditor.parse.js" type="text/javascript"></script>

    <!-- night代码高亮 -->
    <%--<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/night/styles/tomorrow-night-eighties.css">--%>
    <%--<script type="text/javascript" src="<%=request.getContextPath()%>/night/highlight.pack.js"></script>--%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/night/styles/tomorrow-night-eighties.css">
    <script src="<%=request.getContextPath()%>/night/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <![endif]-->
    <!--[if lt IE 9]>
    <script>window.location.href = 'upgrade-browser.html';</script>
    <![endif]-->
    <script>
        document.body.onselectstart = document.body.ondrag = function () {
            return true;
        };
    </script>
</head>

<body class="user-select single">
<jsp:include page="head.jsp"/>
<section class="container">
    <div class="content-wrap">
        <div class="content">
            <header class="article-header">
                <h1 class="article-title"><a href="article.jsp">${article.article_title}</a></h1>
                <div class="article-meta"> <span class="item article-meta-time">
          <time class="time" data-toggle="tooltip" data-placement="bottom" title="时间：${article.article_date}"><i
                  class="glyphicon glyphicon-time"></i><fmt:formatDate value="${article.article_date}"
                                                                       pattern="yyyy-MM-dd HH:mm:ss"/></time>
          </span><%-- <span class="item article-meta-source" data-toggle="tooltip" data-placement="bottom" title="来源：第一PHP社区"><i class="glyphicon glyphicon-globe"></i> 第一PHP社区</span>--%>
                    <span class="item article-meta-category" data-toggle="tooltip" data-placement="bottom"
                          title="栏目：后端程序"><i class="glyphicon glyphicon-list"></i> <a href="program"
                                                                                      title="">${article.sort_name}</a></span>
                    <span class="item article-meta-views" data-toggle="tooltip" data-placement="bottom"
                          title="查看：120"><i
                            class="glyphicon glyphicon-eye-open"></i> 共${article.article_views}人围观</span> <span
                            class="item article-meta-comment" data-toggle="tooltip" data-placement="bottom"
                            title="评论：0"><i class="glyphicon glyphicon-comment"></i> 0个不明物体</span></div>
            </header>
            <article class="article-content1">
                <%=request.getAttribute("article_content")%>
            </article>

            <div class="article-tags">标签：
                <%--<a href="" rel="tag">PHP</a>--%>
                <c:forEach items="${labels}" var="label">
                    <a href="<%=basePath%>/index_get?sort_id=77&keyword=${label.label_name}"
                       rel="tag">${label.label_name}</a>
                </c:forEach>
            </div>
            <div class="relates">
                <div class="title">
                    <h3>相关推荐</h3>
                </div>
                <ul>
                    <c:forEach items="${recommend}" var="a">
                        <li><a href="<%=request.getContextPath()%>/front/article?article_id=${a.article_id}">${a.article_title}</a></li>
                    </c:forEach>
                </ul>
            </div>
            <div class="title" id="comment">
                <h3>评论
                    <small>抢沙发</small>
                </h3>
            </div>
            <!--<div id="respond">
              <div class="comment-signarea">
                <h3 class="text-muted">评论前必须登录！</h3>
                <p> <a href="javascript:;" class="btn btn-primary login" rel="nofollow">立即登录</a> &nbsp; <a href="javascript:;" class="btn btn-default register" rel="nofollow">注册</a> </p>
                <h3 class="text-muted">当前文章禁止评论</h3>
              </div>
            </div>-->
            <div id="respond">
                <form action="<%=request.getContextPath()%>/comment/add" method="post" id="comment-form">
                    <div class="comment">
                        <div class="comment-title">
                            <c:if test="${photo==null}"><img class="avatar"
                                                             src="<%=request.getContextPath()%>/images/tourist.jpg"
                                                             alt=""/></c:if>
                            <c:if test="${photo!=null}"><img class="avatar"
                                                             src="<%=request.getContextPath()%>/uploadFiles/userPhoto/${photo}"
                                                             alt=""/></c:if>
                        </div>
                        <div class="comment-box">
                            <textarea contenteditable="true" placeholder="您的评论可以一针见血" name="comment_content"
                                      id="comment-textarea" cols="100%" rows="3" tabindex="1"></textarea>
                            <div class="comment-ctrl"><span class="emotion" id="emotion"><img src="images/face/5.png"
                                                                                              width="20" height="20"
                                                                                              alt=""/>表情</span>
                                <div class="comment-prompt"><i class="fa fa-spin fa-circle-o-notch"></i> <span
                                        class="comment-prompt-text"></span></div>
                                <input type="hidden" value="1" class="articleid"/>
                                <button type="submit" name="comment-submit" id="comment-submit" tabindex="5"
                                        articleid="1">评论
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="postcomments">
                <ol class="commentlist" id="commentList">
                    <c:forEach items="${listComment}" var="comment" varStatus="status">
                        <c:if test="${comment.user_id!=null}">
                            <li class="comment-content"><span class="comment-f">#${status.index}</span>
                                <c:if test="${!comment.user_photo.startsWith('http')}">
                                    <div class="comment-avatar"><img class="avatar"
                                                                     src="<%=request.getContextPath()%>/uploadFiles/userPhoto/${comment.user_photo}"
                                                                     alt=""/></div>
                                </c:if>
                                <c:if test="${comment.user_photo.startsWith('http')}">
                                    <div class="comment-avatar"><img class="avatar" src="${comment.user_photo}" alt=""/>
                                    </div>
                                </c:if>
                                <div class="comment-main">
                                    <p><span class="address">${comment.user_name}</span><span
                                            class="time"><fmt:formatDate value="${comment.comment_date}"
                                                                         pattern="yyyy-MM-dd HH:mm"/></span><br/>
                                        <span class="comment_content_p">${comment.comment_content}</span></p>
                                </div>
                            </li>
                        </c:if>
                        <c:if test="${comment.user_id==null}">
                            <li class="comment-content"><span class="comment-f">#${status.index}</span>
                                <div class="comment-avatar"><img class="avatar"
                                                                 src="<%=request.getContextPath()%>/images/tourist.jpg"
                                                                 alt=""/></div>
                                <div class="comment-main">
                                    <p>来自<span class="address">${comment.user_name}</span>的用户<span
                                            class="time"><fmt:formatDate value="${comment.comment_date}"
                                                                         pattern="yyyy-MM-dd HH:mm"/></span><br/>
                                        <span class="comment_content_p">${comment.comment_content}</span></p>
                                </div>
                            </li>
                        </c:if>
                    </c:forEach>
                </ol>
                <%--<div class="quotes"><span class="disabled">首页</span><span class="disabled">上一页</span><a class="current">1</a><a href="">2</a><span class="disabled">下一页</span><span class="disabled">尾页</span></div>--%>
            </div>
        </div>
    </div>
    <jsp:include page="sidebar.jsp"></jsp:include>
</section>
<jsp:include page="bottom.jsp"/>
<!--微信二维码模态框-->
<div class="modal fade user-select" id="WeChat" tabindex="-1" role="dialog" aria-labelledby="WeChatModalLabel">
    <div class="modal-dialog" role="document" style="margin-top:120px;width:280px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="WeChatModalLabel" style="cursor:default;">微信扫一扫</h4>
            </div>
            <div class="modal-body" style="text-align:center"><img src="images/weixin.jpg" alt=""
                                                                   style="cursor:pointer"/></div>
        </div>
    </div>
</div>
<!--该功能正在日以继夜的开发中-->
<div class="modal fade user-select" id="areDeveloping" tabindex="-1" role="dialog"
     aria-labelledby="areDevelopingModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="areDevelopingModalLabel" style="cursor:default;">该功能正在日以继夜的开发中…</h4>
            </div>
            <div class="modal-body"><img src="images/baoman/baoman_01.gif" alt="深思熟虑"/>
                <p style="padding:15px 15px 15px 100px; position:absolute; top:15px; cursor:default;">
                    很抱歉，程序猿正在日以继夜的开发此功能，本程序将会在以后的版本中持续完善！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">朕已阅</button>
            </div>
        </div>
    </div>
</div>
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery.ias.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery.cookie.js"></script>
<script type="text/javascript">
    $(function () {
        $('.emotion').qqFace({
            id: 'facebox',
            assign: 'comment-textarea',
            path: '<%=request.getContextPath()%>/images/arclist/'	//表情存放的路径
        });

        //uedirot百度富文本编辑器
        uParse('.article-content1', {
            rootPath: '../'
        })

        //增加文章浏览量
        alert($.cookie('mldn'));
        if ($.cookie('viewId') !=${article.article_id}) {
            alert("******");
            $.ajax({
                async: false,
                type: "POST",
                url: "${pageContext.request.contextPath}/back/article/addview",
                data: {
                    "article_id":${article.article_id},
                    "article_views":${article.article_views}
                },
                dataType: "json",
                success: function (data) {
                    $.cookie(
                        "viewId",
                        ${article.article_id},//需要cookie写入的业务
                        {
                            "path": "/", //cookie的默认属性
                        }
                    );
                },
                error: function () {
                    //alert("获取数据出错!");
                },
            });
        }
    });


    //代码块黑色背景样式
    var allpre = document.getElementsByTagName("pre");
    for (i = 0; i < allpre.length; i++) {
        var onepre = document.getElementsByTagName("pre")[i];
        var mycode = document.getElementsByTagName("pre")[i].innerHTML;
        onepre.innerHTML = '<code id="mycode">' + mycode + '</code>';
    }

    //qqface 评论中显示表情
    var comment_content = $(".comment_content_p");
    $.each(comment_content, function (n) {
        // alert(($(this).search(']')));
        if (($(this).text().search(']') >= 0)) {
            $(this).html(replace_em($(this).text()));
        }
    })

    //字符串替换,,插入图片,显示表情
    function replace_em(str) {
        var start = str.indexOf("[");
        var ent = str.indexOf("]");
        var em = str.substring(start, ent + 1);
        var em_end = em.indexOf("]");
        var em_id = em.substring(4, em_end);
        str = str.replace(em, "<img src='<%=request.getContextPath()%>/images/arclist/" + em_id + ".gif'>");
        return str;
    }

</script>
</body>
</html>